<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	if (session.getAttribute("email") != null
			&& session.getAttribute("token") != null) {
		response.sendRedirect(basePath + "homepage.jsp");
	} else {
		// Set to expire far in the past.
		response.setHeader("Expires", "Sat, 6 May 1995 12:00:00 GMT");

		// Set standard HTTP/1.1 no-cache headers.
		response.setHeader("Cache-Control",
				"no-store, no-cache, must-revalidate");

		// Set IE extended HTTP/1.1 no-cache headers (use addHeader).
		response
				.addHeader("Cache-Control", "post-check=0, pre-check=0");

		// Set standard HTTP/1.0 no-cache header.
		response.setHeader("Pragma", "no-cache");
	}
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" type="text/css" href="css/template.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery/template.js"></script>
</head>
<body>
<!--#################### login #####################-->
<div data-role="page" id="login">
  <div data-role="header" data-theme="b">
    <h1>CampusGroup</h1>
  </div>

  <div data-role="navbar" data-theme="c">
      <ul>
        <li><a href="#" data-role = "button" data-icon="home" >Home</a></li>
        <li><a href="#" data-role = "button" data-icon="plus" >Groups</a></li>
        <li><a href="#" data-role = "button" data-icon="star" >Profile</a></li>
      </ul>
    </div>
    	<div data-role="content">
    		<p>Please login with your email and password.</p>
    		<div data-role="fieldcontain">
    		<span id = "test_login_e" style = "width:100px; color: red; display:none">   Invalid</span>
        	<label class="ui-input-text"for="email">Email:</label>
       		<input id="username_login" name="email" value="" type="text" autocomplete="on" placeholder="Email">  
       		<span id = "test_login_p" style = "width:100px; color: red; display:inline">  cannot be empty </span>     
       		<label class="ui-input-text" for="password">Password:</label>
        	<input class = "password" id="password" name="password" value="" type="password" placeholder="Password">
       		<button class="submit" name= "servlet/Login" id = "login" disabled="disabled" data-inline="true" >Login</button>
       		<p id = "message-login" class = "message" style = "color: red; display:none"></p>
      		</div>
    	</div>
	    	<div data-role="controlgroup" data-type="horizontal">
			<a  href="#register" data-role="button" data-icon="gear">Register</a>
			<a  href="#forgot" data-role="button" data-icon="info">Reminder</a>
			<a  href="#login" data-role="button" data-icon="check" class="ui-btn-active ui-state-persist" >Log In</a>
		</div>
</div>

<!--#################### register#####################-->
<div data-role="page" id="register">
  <div data-role="header" data-theme="b">
    <h1>CampusGroup</h1>
  </div>

  <div data-role="navbar" data-theme="c">
      <ul>
        <li><a href="#" data-role = "button" data-icon="home" >Home</a></li>
        <li><a href="#" data-role = "button" data-icon="plus" >Groups</a></li>
        <li><a href="#" data-role = "button" data-icon="star" >Profile</a></li>
      </ul>
    </div>
    	<div data-role="content">
    		<p>Please register only with your uni email.</p>
    		<div data-role="fieldcontain">
    		<span id = "test_register" style = "width:100px; color: red; display:none">Invalid</span>
        	<label class="ui-input-text"for="email">Email:</label>
       		<input class = "email" id="username_register" name="email" value="" type="text" autocomplete="on" placeholder="Email" >     
       		<button class="submit" name= "servlet/Register" id="register" disabled="disabled" data-inline="true">Register</button>
            <p id = "message-register" class = "message" style = "color: red; display:none"></p>
      		</div>
    	</div>
    	<div data-role="controlgroup" data-type="horizontal">
			<a  href="#register" data-role="button" data-icon="gear" class="ui-btn-active ui-state-persist">Register</a>
			<a  href="#forgot" data-role="button" data-icon="info">Reminder</a>
			<a  href="#login" data-role="button" data-icon="check">Log In</a>
		</div>
</div>

<!--#################### forgot #####################-->
<div data-role="page" id="forgot">
  <div data-role="header" data-theme="b">
    <h1>CampusGroup</h1>
  </div>

  <div data-role="navbar" data-theme="c">
      <ul>
        <li><a href="#" data-role = "button" data-icon="home" >Home</a></li>
        <li><a href="#" data-role = "button" data-icon="plus" >Groups</a></li>
        <li><a href="#" data-role = "button" data-icon="star" >Profile</a></li>
      </ul>
    </div>
    	<div data-role="content">
    		<p>Please get your password only with your uni email.</p>
    		<div data-role="fieldcontain">
    		<span id = "test_remind" style = "width:100px; color: red; display:none">  Invalid</span>	
        	<label class="ui-input-text"for="email">Email:</label>
       		<input class = "email" id="username_remind" name="email" value="" type="text" autocomplete="on" placeholder="Email">     
       		<button class="submit" name= "servlet/Reminder" id="remind" disabled="disabled" data-inline="true">Remind me</button>
            <p id = "message-forgot" class = "message" style = "color: red; display:none"></p>
      		</div>
    	</div>

    	<div data-role="controlgroup" data-type="horizontal">
			<a  href="#register" data-role="button" data-icon="gear">Register</a>
			<a  href="#forgot" data-role="button" data-icon="info" class="ui-btn-active ui-state-persist" >Reminder</a>
			<a  href="#login" data-role="button" data-icon="check">Log In</a>
		</div>
    	
</div>

</body>
</html>
